<template>
   <div class="rss bgImg">
    <div class="body body-update">
      <h4 style="text-align:center;">要先输入密保问题的答案才能找回密码哦</h4>
      <el-form :model="form" status-icon :rules="rules" ref="registerForm"  class="login-form">
        <el-form-item prop="email">
          <el-input placeholder="请输入邮箱验证" v-model="form.email" clearable ></el-input>
        </el-form-item>
        <el-form-item prop="question">
          <el-input placeholder="请输入问题验证是否是本人操作哦" v-model="form.question" clearable></el-input>
        </el-form-item>
        <el-form-item  prop="answer">
          <el-input placeholder="请输入答案验证是否是本人操作哦" v-model="form.answer" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('registerForm')">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      form: {
        email:'',
        question: '',
        answer: '',
      },
      isDisabled:"",
      rules:{
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        question:[
          { required: true, message: '问题不能为空哦', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符，不要太长哦', trigger: 'blur' }
        ],
        answer:[
          { required: true, message: '答案不能为空哦', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符，太长记不住哦', trigger: 'blur' }
        ],
        secret:{}
      }
    }
  },
  mounted(){
    this.getQusition();
  },
  methods:{
    // 查询密保问题的数据
    async getQusition(){
      // console.log(this.$route.query.email=="");
      let email = this.$route.query.email
      if(email==""){
        // console.log("空");
      }else{
        this.form.email = email
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          this.RetrievePass();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    async RetrievePass(){
      console.log(this.form);
      // 第一步：查询密保问题
      let form = this.form;
      const {data:res} = await this.$http.post("selRetrievePass",{form});
      console.log(res);
      if(res.status != 200){
        this.$message.error('获取数据失败');
      }else{

        console.log(typeof(res.message));//object string
        if(typeof(res.message)==="string"){
          this.$message(res.message);
        }else{
          let result = res.message[0];
          if(result.question==form.question&&result.answer==form.answer){
            alert("验证成功，密码是："+result.password);
            this.$router.push({path:"login",query:{account:form.email}});
          }else if(result.question!=form.question){
            this.$message.error('问题错误');
            this.form.question = ""
          }else if(result.answer!=form.answer){
             this.$message.error('答案错误');
             this.form.answer = ""
          }
          console.log(result);
        }
      }
    },
    resetForm() {
       this.form.question=this.form.answer = "";
    }
  }
}
</script>
<style scoped>
.body-update {
  width:700px;
  margin: 10px auto;
}
</style>
